<template>
<div class="video-wrapper">
  <p>{{playMsg}}</p>
  <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
  <el-dialog
    :title="playMsg"
    :visible.sync="dialogVisible"
    :width="playerOptions.width"
    @close="handleClose"
    :before-close="handleBeforeClose">
    <video-player  class="video-player-box"
                  ref="videoPlayer"
                  :options="playerOptions"
                  :playsinline="true"
                  customEventName="customstatechangedeventname"
                  @play="onPlayerPlay($event)"
                  @pause="onPlayerPause($event)"
                  @ready="playerReadied">
    </video-player>
  </el-dialog>
</div>
</template>
<script>
import "video.js/dist/video-js.css";
import { videoPlayer } from "vue-video-player";
import video from "./video/video.mp4";
import poster from "./img/poster.png";
export default {
  data() {
    return {
      isPlay: false,
      dialogVisible: false,
      playerOptions: {
        // videojs options
        width: "1000px",
        muted: false, // 规定视频的音频输出应该被静音
        language: "en",
        // playbackRates: [0.7, 1.0, 1.5, 2.0], // 设置或返回音频/视频的当前播放速度
        sources: [
          {
            type: "video/mp4",
            src: video
          }
        ],
        poster: poster
      }
    };
  },
  components: {
    videoPlayer
  },
  computed: {
    playMsg() {
      return this.isPlay ? "播放中" : "暂停中";
    },
    player() {
      return this.$refs.videoPlayer.player;
    }
  },
  methods: {
    // listen event
    onPlayerPlay(player) {
      this.isPlay = true;
      console.log("player play!", player);
    },
    onPlayerPause(player) {
      this.isPlay = false;
      console.log("player pause!", player);
    },
    // player is ready
    playerReadied(player) {
      console.log("the player is readied", player);
      // you can use it to do something...
      // player.[methods]
    },
    handleBeforeClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    handleClose() {
      this.player.currentTime(0);
      this.player.pause();
      this.isPlay = false;
    }
  }
};
</script>
<style lang="less">
.video-wrapper {
  .el-dialog__body {
    padding: 0 !important;
  }
}
</style>

<style lang="less" scoped>
</style>
